<template>
	<view>
		<u-sticky>
			<view class="nav-bar flex-y-center"
				:style="{paddingTop: getMenuButton().top + 'px', height: getMenuButton().height + 'px'}">
				<view class="page-title">分类</view>
			</view>
		</u-sticky>

		<view class="category-container" :style="{height: 'calc(100vh - ' + navbarH + 'px)'}">
			
			<view class="left">
				<scroll-view scroll-y="true" :style="{height: 'calc(100vh - ' + navbarH + 'px)'}">
					<view class="level1-list" v-for="(item, index) in leftCategorys" :key="item.id">
						<view class="level1-name">{{item.level1.categoryTitle}}</view>
						<view class="level2-item" :class="{'level2-item-active': currentLevel2 === i}"
							v-for="(child, i) in item.children" :key="child.id" @tap="chooseLevel2(index, i)">
							{{child.categoryTitle}}
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="right">
				<scroll-view :scroll-with-animation="true" scroll-y="true" :scroll-into-view="scrollIntoId" :style="{height: 'calc(100vh - ' + navbarH + 'px)'}">
					<view class="level3-list" :id="'cate' + item.level3.parent" v-for="(item, index) in rightCategorys" :key="item.id">
						<view class="level3-name">{{item.level3.categoryTitle}}</view>
						<view class="level4-list flex-y-center">
							<view class="level4-item" v-for="(child, i) in item.children"
								@tap="$myUni.navTo('/pages/product/list-product?from=category&categoryId=' + child.id)">
								<image :src="child.categoryCover | formatFile" class="category4-cover" mode=""></image>
								<text class="name">{{child.categoryTitle}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCategory
	} from '../../api/product'
	export default {
		data() {
			return {
				navbarH: 0,
				currentLevel2: -1,
				leftCategorys: [],
				rightCategorys: [],
				categoryList: [],
				scrollIntoId: ''
			}
		},
		onLoad() {
			this.getCategory()
		},
		mounted() {
			uni.createSelectorQuery().select('.nav-bar').boundingClientRect(data => {
				this.navbarH = data.height
			}).in(this).exec()
		},
		methods: {
			getCategory() {
				getCategory().then(res => {
					this.categoryList = res.result
					
					//设置左侧分类
					this.categoryList.forEach(item => {
						
						let level2 = []
						if (item.children) {
							level2 = item.children.map(child => ({
								categoryLevel: child.categoryLevel,
								categoryTitle: child.categoryTitle,
								id: child.id
							}))
						}
						
						this.leftCategorys.push({
							level1: {
								categoryLevel: item.categoryLevel,
								categoryTitle: item.categoryTitle,
								id: item.id
							},
							children: level2
						})
						
						item.children.forEach(level2 => {
							
							level2.children && level2.children.forEach(level3 => {
								
								let level3Obj = {
									categoryLevel: level3.categoryLevel,
									categoryTitle: level3.categoryTitle,
									id: level3.id,
									parent: level2.id
								}
								const rightList = [];
								
								level3.children && level3.children.forEach(level4 => {
									rightList.push({
										categoryLevel: level4.categoryLevel,
										categoryTitle: level4.categoryTitle,
										id: level4.id,
										categoryCover: level4.categoryCover
									})
								})
								this.rightCategorys.push({
									level3: level3Obj,
									children: rightList
								})
							})
						})
					})
				})
			},
			chooseLevel2(index, i) {
				const level2 = this.leftCategorys[index].children[i]
				this.scrollIntoId = 'cate' + level2.id
				this.currentLevel2 = i
			}
		}
	}
</script>

<style lang="scss">
	.nav-bar {
		position: relative;
		padding: 20rpx 30rpx;
		background: #fff;


		.address {
			font-size: 29rpx;
			color: #333333;

			.address-text {
				width: 200rpx;
			}
		}

		.page-title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: 35rpx;
			color: #000000;
			text-align: center;
		}
	}

	.category-container {
		background: #F7F7F7;
		display: flex;

		.left {
			flex-shrink: 0;
			width: 200rpx;
			box-sizing: border-box;
			border-radius: 0rpx 319rpx 0rpx 0rpx;

			.level1-list {
				border-bottom: 1rpx solid #EBEBEB;

				.level1-name {
					text-align: center;
					padding: 50rpx 20rpx 30rpx;
					font-weight: bold;
					font-size: 29rpx;
					color: #333333;
				}

				.level2-item {
					text-align: center;
					padding: 30rpx 20rpx;
					font-size: 27rpx;
					color: #666666;
				}

				.level2-item-active {
					position: relative;
					background-color: #fff;
				}

				.level2-item-active::before {
					position: absolute;
					content: "";
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 9rpx;
					height: 33rpx;
					background: #FE5A13;
					border-radius: 0rpx 8rpx 9rpx 0rpx;
				}
			}
		}

		.right {
			flex: 1;
			background-color: #fff;
			padding-left: 20rpx;

			.level3-list {

				.level3-name {
					padding: 30rpx 0;
					font-size: 27rpx;
					color: #333333;
					font-weight: bold;
				}
			}

			.level4-list {
				display: flex;
				flex-wrap: wrap;

				.level4-item {
					width: 33.33%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 30rpx;

					.category4-cover {
						width: 150rpx;
						height: 150rpx;
						border-radius: 15rpx;
					}

					.name {
						font-weight: 500;
						font-size: 23rpx;
						color: #333333;
						padding-top: 15rpx;
					}
				}

			}
		}
	}
</style>